import PropTypes from 'prop-types';
// import classnames from 'classnames';
import React from 'react';
import css from './index.less';
import goBack from 'assert/img/goBack.png';

import ClassList from '../classList';
import Details from './detail';
import {FEED} from 'utils/feedFunc';


export default class RenderClass extends React.Component {

  static propTypes = {
    itemDetail: PropTypes.array.isRequired,
    selectedInd: PropTypes.number,
  };

  static defaultProps = {
    itemDetail: [
      {
        name: '拖把系列',
        goods: [
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '1111',
            price: '198.00',
            soldQuantity: '123465',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '222',
            price: '198.00',
            soldQuantity: '123465',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '333',
            price: '198.00',
            soldQuantity: '123465',
          },
        ],
      },
      {
        name: '清洁工具',
        goods: [
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '1111',
            price: '198.00',
            soldQuantity: '123465',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '222',
            price: '198.00',
            soldQuantity: '123465',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '333',
            price: '198.00',
            soldQuantity: '123465',
          },
        ],
      },
      {
        name: '家具收纳',
        goods: [
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '1111',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '222',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '333',
          },
        ],
      },
      {
        name: '一次性用品',
        goods: [
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '1111',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '222',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '333',
          },
        ],
      },
      {
        name: '卫浴用品',
        goods: [
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '1111',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '222',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '333',
          },
        ],
      },
    ],
    selectedInd: 1,
    clickId: '', // 点击轮播图片传的淘宝id
  };


  constructor(props) {
    super(props);
    this.state = {
      // detailsId: -1,
      // showDetails: false,
      detailsId: props.clickId === '' ? -1 : props.clickId,
      showDetails: props.clickId === '' ? false : true,
      selectedInd: props.selectedInd,
    };

    this.itemDetail = props.itemDetail.slice(0);
    // console.log('props.clickId', props.clickId);
  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }


  getClass(ind) {
    if (ind === 0) {
      this.props.switchRoute('Slider');
    }
    this.setState({
      selectedInd: ind,
    });

  }


  renderImgs = (item, index) => {

    // let len = this.itemDetail[this.state.selectedInd].goods.length;
    // let lastChunkNum = len % 3;
    // let num = [];
    // if (lastChunkNum === 1) num = num.concat(len - 1);
    // if (lastChunkNum === 2) num = num.concat(len - 1).concat(len - 2);
    // if (lastChunkNum === 0) num = num.concat(len - 1).concat(len - 2).concat(len - 3);


    const boxProps = {
      key: index,
      className: css.wrapper,
      style: {
        borderRight: (index + 1) % 3 === 0 ? 'none' : '1px solid #dddddd',
        borderBottom: '1px solid #dddddd',
        // borderBottom: num.includes(index) ? 'none' : '1px solid #dddddd',
        // color: item.goodsTaobaoId === this.state.detailsId ? 'red' : '#000000',
      },
      onClick: () => {
        this.setState({
          detailsId: item.goodsTaobaoId,
          showDetails: true,
        });
        // FEED('');
      },

    };

    const imgProps = {
      // src: item.picUrl,
      src: `${item.picUrl}_q80_.webp`,
      className: css.img,
    };

    let text = item.title ? `${item.title.slice(0, 21)}...` : item.title;
    let price = item.price ? item.price.split('.')[0] : item.price;

    return (
      <div {...boxProps}>
        <img {...imgProps}/>
        <div className={css.title}>{text}</div>
        <div className={css.bottom}>
          <div className={css.price}><span>RMB </span>{price}元</div>
          <div className={css.sold}><span>月销量: </span>{item.soldQuantity}</div>
        </div>
      </div>
    );
  };

  render() {

    const {detailsId, showDetails, selectedInd} = this.state;
    // console.log('this.itemDetail', this.itemDetail);
    let detail = this.itemDetail[selectedInd];
    const detailsProps = {
      detailsId,
      itemDetail: detail.goods,
      hidden: () => {
        this.setState({
          showDetails: false,
        });
        FEED('');
      },
    };

    const classProps = {
      showInd: this.props.selectedInd,
      getClass: this.getClass.bind(this),
      isPage: true,
      itemDetail: this.itemDetail,
      clearId: () => this.props.clearId(),
    };

    const toHomeProps = {
      className: css.toHome,
      src: goBack,
      onClick: () => {
        this.props.switchRoute('Slider');
        this.props.clearId();
        FEED('');
      }
    };

    return (
      <div className = {css.innerWrapper}>
        {
          detail.goods.map( (item, index) => {
            return this.renderImgs(item, index);
          })
        }
        <ClassList {...classProps}/>
        <img {...toHomeProps}/>
        {
          showDetails && <Details {...detailsProps}/>
        }
      </div>

    );
  }
}
